<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="google-adsense-account" content="ca-pub-3661157653310294">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}系统平台{% endblock %}</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/common.css') }}">
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3661157653310294"
     crossorigin="anonymous"></script>
    {% block css %}{% endblock %}
</head>
<body>
    <div class="page-container">
        <!-- 主内容区域 -->
        <div class="main-content" style="margin-left: 0px;" id="main-content">
            <div class="top-header">
                <div class="header-left">
                    <button class="menu-toggle" id="menu-toggle" aria-label="菜单">
                        <i class="fas fa-bars"></i>
                    </button>
                    <div class="page-title">
                        <h1>{% block page_title %}页面标题{% endblock %}</h1>
                    </div>
                </div>
                <div class="header-right">
                    <div class="user-info">
                        <div class="user-avatar">
                            <i class="fas fa-user-circle"></i>
                        </div>
                        <span class="username">{{ username or '未登录' }}</span>
                        <div class="user-menu">
                            {% if username %}
                                <a href="/logout" class="logout-button">
                                    <i class="fas fa-sign-out-alt"></i>
                                    退出登录
                                </a>
                            {% else %}
                                <a href="/login" class="login-button">
                                    <i class="fas fa-sign-in-alt"></i>
                                    登录
                                </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="content-container">
                {% block content %}{% endblock %}
            </div>
        </div>
    </div>

    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3661157653310294"
    crossorigin="anonymous"></script>
    <!-- index -->
    <ins class="adsbygoogle"
        style="display:block"
        data-ad-client="ca-pub-3661157653310294"
        data-ad-slot="4830004869"
        data-ad-format="auto"
        data-full-width-responsive="true"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const sidebar = document.getElementById('sidebar');
            const mainContent = document.getElementById('main-content');
            const sidebarToggle = document.getElementById('sidebar-toggle');
            const menuToggle = document.getElementById('menu-toggle');
            const backdrop = document.getElementById('sidebar-backdrop');
            const userInfo = document.querySelector('.user-info');
            const isMobile = window.innerWidth <= 768;
            
           
            // 用户菜单下拉功能
            userInfo.addEventListener('click', function(e) {
                this.classList.toggle('active');
                e.stopPropagation();
            });
            
            // 点击其他区域关闭用户菜单
            document.addEventListener('click', function() {
                userInfo.classList.remove('active');
            });
            
            // 窗口大小改变时处理
            window.addEventListener('resize', function() {
                const currentIsMobile = window.innerWidth <= 768;
                
                // 当从移动端变成桌面端时
                if (isMobile !== currentIsMobile) {
                    // 关闭遮罩
                    backdrop.classList.remove('active');
                    document.body.style.overflow = '';
                    
                    // 恢复桌面端侧边栏状态
                    if (!currentIsMobile) {
                        const shouldBeCollapsed = localStorage.getItem('sidebar-collapsed') === 'true';
                        sidebar.classList.toggle('collapsed', shouldBeCollapsed);
                        mainContent.classList.toggle('expanded', shouldBeCollapsed);
                    }
                }
            });
        });
    </script>
    
    {% block scripts %}{% endblock %}
</body>
</html> 